import { Component, OnInit, Input, ViewEncapsulation, OnChanges, SimpleChanges } from '@angular/core';
declare let d3: any;


@Component({
	selector: 'app-group-line',
	template: `
	    <div>
	        <nvd3 [options]="options" [data]="data"></nvd3>
	    </div>
	`,
	styleUrls: ['./../../../../../node_modules/nvd3/build/nv.d3.css'],
	encapsulation: ViewEncapsulation.None
})
export class GroupLineComponent implements OnInit, OnChanges {

	options;
	data;

	_stores: any[] = [];
	_prices: any[] = [];

	constructor() { }

	ngOnInit() {
		this.options = {
			chart: {
				type: 'multiChart',
				height: 450,
				margin: {
					top: 20,
					bottom: 40,
					left: 60,
					right: 40
				},
				x: function(d) { return d.x; },
				y: function(d) { return d.y; },
				useInteractiveGuideline: true,
				xAxis: {
					axisLabel: 'Date',
					tickFormat: function(d) {
						return d3.time.format('%m/%d/%Y')(new Date(d));
					}
				},
				yAxis1: {
					axisLabel: 'Stores'
				},
				yAxis2: {
					axisLabel: 'Prices'
				}
			}
		}

		this.data = [
		    {
		    	'values': [],
		    	'key': 'Stores',
		    	'color': '#b2cooc',
		    	'yAxis': 1,
		    	'type': 'line'
		    },
		    {
		    	'values': [],
		    	'key': 'Prices',
		    	'color': '#33ccbb',
		    	'yAxis': 2,
		    	'type': 'line'
		    }
		];
	}

	ngOnChanges(changes: SimpleChanges) {
		// this._stores.length = 0;
		// changes.stores.currentValue.forEach(element => {
		// 	this._stores.push({x: element.x, y: element.y});
		// });

		// this._prices.length = 0;
		// changes.prices.currentValue.forEach(element => {
		// 	this._prices.push({x: element.x, y: element.y});
		// })
	}


}